<template>
    <el-tree :data="data" :props="defaultProps" />
</template>

<script>
    export default {
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            };
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                const res = {
                    "code": 0,
                    "message": "",
                    "data": [
                        {
                            "id": 1,
                            "name": "网格1",
                            "parentId": null,
                            "sortBy": 1
                        },
                        {
                            "id": 2,
                            "name": "网格1_1",
                            "parentId": 1,
                            "sortBy": 1
                        },
                        {
                            "id": 3,
                            "name": "网格1_2",
                            "parentId": 1,
                            "sortBy": 2
                        },
                        {
                            "id": 4,
                            "name": "网格1_1_1",
                            "parentId": 2,
                            "sortBy": 2
                        },
                        {
                            "id": 5,
                            "name": "网格1_1_2",
                            "parentId": 2,
                            "sortBy": 1
                        },
                        {
                            "id": 6,
                            "name": "网格1_1_1_1",
                            "parentId": 4,
                            "sortBy": 1
                        },
                        {
                            "id": 7,
                            "name": "网格1_1_1_2",
                            "parentId": 4,
                            "sortBy": 1
                        }
                    ]
                }
                const data = res.data
                let obj = {
                    not: []
                }
                data.forEach(item => {
                    item.children = []
                    if (item.parentId != null) {
                        let key = '_' + String(item.parentId)
                        if (!obj[key]) {
                            obj[key] = []
                        }
                        obj[key].push(item)
                    } else {
                        obj['not'].push(item)
                    }
                })
                // console.log(obj)
                let fn = (list) => {
                    list.sort((a,b) => a.sortBy - b.sortBy).forEach(item => {
                        item.children = obj['_' + String(item.id)] ?? []
                        if (item.children.length > 0) {
                            fn(item.children)
                        }
                    })
                }
                fn(obj['not'])
                this.data = obj['not']
            }
        }
    };
</script>

<style scoped>

</style>